<template>
  <div>
    <el-card class="box">
      <el-form ref="form" :model="formData" :rules="rules">
        <el-row :gutter="24">
          <el-col :span="8">
            <!-- <h6>仓库编码</h6> -->
            <el-form-item label="仓库编码" prop="code">
              <el-input v-model="formData.code" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <!-- <h6>仓库名称</h6> -->
            <el-form-item label="仓库名称" prop="name">
              <el-input v-model="formData.name" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <!-- <h6>仓库类型</h6> -->
            <el-form-item label="仓库类型" prop="type">
              <el-select v-model="formData.type" placeholder="请选择" style="width: 100%;">
                <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="16">
            <!-- <h6>省/市/区</h6> -->
            <el-form-item label="省/市/区" prop="location">
              <!-- <el-cascader
                v-model="formData.location"
                placeholder="请选择"
                :options="options"
                :props="{ expandTrigger: 'hover' }"
                style="width: 100%;"
                @change="handleChange"
             / > -->
              <el-cascader
                ref="cascader"
                v-model="formData.location"
                clearable
                :options="options"
                :props="{ expandTrigger: 'hover' }"
                style="width: 100%;"
                @change="handleChange"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="16">
            <!-- <h6>详细地址</h6> -->
            <el-form-item label="详细地址" prop="address">
              <el-input v-model="formData.address" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="2.5">
            <!-- <h6 style="margin-bottom:35px">仓库状态</h6> -->
            <el-form-item label="仓库状态" prop="status">
              <el-radio v-model="formData.status" label="1">启用</el-radio>
              <el-radio v-model="formData.status" label="2">停用</el-radio>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-bottom: 50px;">
          <el-col :span="8">
            <!-- <h6>仓库面积</h6> -->
            <el-form-item label="仓库面积" prop="surface">
              <el-input v-model.number="formData.surface" placeholder="请输入">
                <template slot="append">m³</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <!-- <h6>负责人</h6> -->
            <el-form-item label="负责人" prop="personName">
              <el-input v-model="formData.personName" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <!-- <h6>联系电话</h6> -->
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="formData.phone" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-button class="btn1" style="width:12%;color: #000;" round @click="$router.push('/information/warehouse')">返回</el-button>
          <el-button class="btn2" style="width:12%;color: #000" type="warning" round @click="btnOk">提交</el-button>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getAddWarehouseAPI } from '@/api/information'
import { CodeToText, regionData } from 'element-china-area-data' // 导入地图数据

export default {
  data() {
    return {
      formData: {
        code: 'CK013904',
        name: '',
        type: '',
        location: [],
        address: '',
        status: '1',
        surface: 0,
        personName: '',
        phone: '',
        province: '',
        city: '',
        area: ''
      },
      option: [
        {
          value: 'ZZ',
          label: '中转仓'
        },
        {
          value: 'JG',
          label: '加工仓'
        },
        {
          value: 'CB',
          label: '储备仓'
        },
        {
          value: 'LC',
          label: '冷藏仓'
        }
      ],
      options: regionData,

      value: '',
      //   校验规则
      rules: {
        name: [{ required: true, message: '请输入仓库名称', trigger: 'blur' }],
        type: [{ required: true, message: '请选择仓库类型', trigger: 'change' }],
        location: [{ required: true, message: '请选择省市区', trigger: 'change' }],
        status: [{ required: true }],
        personName: [{ required: true, message: '请输入负责人', trigger: 'blur' }],
        phone: [{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 地图
    handleChange(e) {
      // 因为上边选择好城市之后打印出来的是编码，这里是将编码转换为文字
      const province = CodeToText[this.formData.location[0]] // 省
      let city = CodeToText[this.formData.location[1]] // 市
      const area = CodeToText[this.formData.location[2]] // 区(三级联动带区的话可以加上这个，二级联动不需要这个)
      // const arr = ['province', 'city', 'area']
      // const obj = { ...arr }
      // console.log(obj)

      if (city === '市辖区') { // 选择北京市的话，第二个选项为输入框
        city = province // 这里根据后台需求，给它赋值，我这里是如果为市辖区，城市和省名字保持一致
      }
      // 这里是请求赋值
      this.formData.location = `${province}/${city}/${area}`
      this.formData.province = province
      this.formData.city = city
      this.formData.area = area// 三级联动带区可以加上，二级联动(省市)不需要
    },

    async btnOk() {
      console.log(this.formData)
      // 校验表单
      await this.$refs.form.validate()
      // // 发送请求
      const res = await getAddWarehouseAPI(this.formData)
      console.log(res)
      // // 提示用户
      this.$message.success('新增成功')
      // 跳转回仓库管理页面
      // 渲染主页面
    }
  }

}
</script>

<style lang="scss" scoped>

.box{
    width: 99%;
    border-radius: 10px;
}
.btn1:hover{
background: #e4a242;
}
.btn2:hover{
background: #fa8100;
}

::v-deep .el-radio__input.is-checked .el-radio__inner {
    border-color: #fa8100;
    background: #fa8100;
}
::v-deep .el-radio__input.is-checked+.el-radio__label {
    color: #fa8100;
}
</style>
